<!-- 申请售后页面 -->
<template>
	<view>
		<view class="right-title">
			<uni-icons class="uniIcons" type="back" size="20" @click="goBack"></uni-icons>
			申请售后
		</view>
		<!-- 产品信息 -->
		<view class="order-table">
			<view class="order-detail-container">
				<view class="product-info">
					<uni-table ref="table" type="selection" @selection-change="selectionChange" border stripe
						emptyText="暂无更多数据">
						<uni-tr style="background-color: #F5F5F5;">
							<uni-th width="450" align="center">产品信息</uni-th>
							<uni-th width="100" align="center">购买数量</uni-th>
							<uni-th width="100" align="center">单价</uni-th>
							<uni-th width="100" align="center">小计</uni-th>
							<uni-th width="100" align="center">退货退款</uni-th>
						</uni-tr>
						<uni-tr v-for="(item, index) in tableData" :key="index">
							<uni-td>
								<view class="information">
									<view class="td-img">
										<image src="/static/carousel04.png" mode="aspectFill"></image>
									</view>
									<view class="introduce">
										<view class="introduce-name">聚合物真零级涡旋半波片，m=1，工作波长633 nm，通光孔径21.5
											mm，双层衬底，安装于标准SM1透镜套筒中</view>
										<view class="introduce-model">产品型号：VR1-633</view>
									</view>
								</view>
							</uni-td>
							<uni-td align="center">1</uni-td>
							<uni-td align="center">￥122</uni-td>
							<uni-td align="center">￥6728</uni-td>
							<uni-td align="center">
								<view class="cart-group">
									<text class="cart-btn" @click="decrease(index)">-</text>
									<input maxlength="4" type="number" v-model="item.val" class="cart-input" />
									<text class="cart-btn" @click="increase(index)">+</text>
								</view>
							</uni-td>
						</uni-tr>
					</uni-table>
				</view>
			</view>
		</view>
		<view class="formcla">
			<uni-forms label-width="80px" label-align="right" ref="baseForm" :rules="dynamicRules"
				:modelValue="baseFormData">
				<uni-forms-item label="服务类型" required>
					<uni-data-checkbox selectedColor="#D92400" mode="tag" v-model="baseFormData.serviceType"
						:localdata="1===1?typeList:typeList1" @change="change"></uni-data-checkbox>
				</uni-forms-item>
				<uni-forms-item label="退款方式" required v-if="baseFormData.serviceType===0||baseFormData.serviceType===1">
					<view class="refundAmount">退回原付款方式；预估退款金额：￥6728，以实际为准</view>
				</uni-forms-item>
				<uni-forms-item label="退款金额" required v-if="baseFormData.serviceType===3">
					<uni-easyinput v-model="baseFormData.refundAmount" placeholder="请输入退款金额" />
				</uni-forms-item>
				<uni-forms-item label="服务支持" required v-if="baseFormData.serviceType===1||baseFormData.serviceType===2">
					<view class="service">三个月内包退；六个月内包换，三年内免费保修和终身维修</view>
					<view class="servicePhone">客服电话：0530-2216166</view>
				</uni-forms-item>
				<uni-forms-item label="提交原因" required>
					<uni-data-select v-model="baseFormData.reason" :localdata="reasonList"
						@change="reasonChange"></uni-data-select>
				</uni-forms-item>
				<uni-forms-item label="商品状态" required v-if="baseFormData.serviceType===1">
					<uni-data-checkbox selectedColor="#D92400" mode="tag" v-model="baseFormData.productStatus"
						:localdata="productStatusList" @change="productStatusChange"></uni-data-checkbox>
					<view class="serviceProduct">工术会在收货时再次确认商品状态</view>
				</uni-forms-item>
				<uni-forms-item label="问题描述" required>
					<uni-easyinput type="textarea" maxlength="500" v-model="baseFormData.describe"
						placeholder="请输入问题描述" />
				</uni-forms-item>
				<uni-forms-item label="图片上传" required v-if="baseFormData.serviceType===1||baseFormData.serviceType===2">
					<uni-file-picker class="imageCla" v-model="baseFormData.imageValue" limit="5" @select="select"
						@progress="progress" @success="success" @fail="fail"
						title="为了帮助您更好的解决问题，请上传图片，最多选择5张图片"></uni-file-picker>
				</uni-forms-item>
			</uni-forms>
			<view class="button-group">
				<button type="primary" class="submitBut" size="mini" @click="submit('dynamicForm')">提交</button>
			</view>
		</view>
	</view>
</template>

<script>
	import tableData from '/pages/test1/tableData.js'
	export default {
		name: "afterSales",
		data() {
			return {
				tableData: [], // 产品表格数据
				selectedIndexs: [], // 选中的数据索引
				selectedList: [], // 选中的数据

				typeList: [{
					text: '退货退款',
					value: 1
				}, {
					text: '换货',
					value: 2
				}, {
					text: '仅退款',
					value: 3
				}],
				typeList1: [{
					text: '退款',
					value: 0
				}],
				productStatusList: [{
						text: '未损坏',
						value: 0
					},
					{
						text: '已损坏',
						value: 1
					}
				],
				baseFormData: { // 退款表单数据
					serviceType: 1, // 服务类型
					refundAmount: '', // 退款金额
					reason: '', // 退款原因
					productStatus: 0, // 商品状态
					describe: '', // 问题描述
					imageValue: [], // 上传的图片
				},
				reasonList: [{
						value: 0,
						text: "买多/买错/不想要"
					},
					{
						value: 1,
						text: "商品质量问题"
					},
					{
						value: 2,
						text: "商品与页面描述不符"
					},
					{
						value: 3,
						text: "发错货"
					},
					{
						value: 4,
						text: "商品/包装破损"
					},
					{
						value: 5,
						text: "少件/未收到货"
					},
					{
						value: 6,
						text: "效期问题"
					},
				],
				dynamicRules: { // 表单校验
					refundAmount: {
						rules: [{
							required: true,
							errorMessage: '退款金额不能为空'
						}]
					},
					describe: {
						rules: [{
							required: true,
							errorMessage: '问题描述不能为空'
						}]
					},
					hobby: {
						rules: [{
							required: true,
							errorMessage: '请选择原因'
						}]
					}
				},

			};
		},
		props: {
			// clickColorIndex: {
			// 	type: Number, // 数字类型
			// 	required: true, // 必填项
			// 	default: 0 // 默认值
			// },
		},
		mounted() {
			this.getData();
		},
		methods: {
			// 获取上传状态
			select(e) {
				console.log('选择文件：', e)
			},
			// 获取上传进度
			progress(e) {
				console.log('上传进度：', e)
			},

			// 上传成功
			success(e) {
				console.log('上传成功')
			},

			// 上传失败
			fail(e) {
				console.log('上传失败：', e)
			},
			// 提交原因
			reasonChange(e) {
				console.log("e:", e);
			},
			//服务类型变化
			change(e) {
				console.log('e:', e);
			},
			// 减少数量
			decrease(index) {
				if (this.tableData[index].val > 1) this.tableData[index].val--;
			},
			// 增加数量
			increase(index) {
				this.tableData[index].val++;
			},
			// 多选处理
			selectedItems() {
				return this.selectedIndexs.map(i => this.tableData[i])
			},
			// 多选
			selectionChange(e) {
				console.log(e.detail.index)
				this.selectedIndexs = e.detail.index
				this.selectedList = this.selectedItems()
				console.log(this.selectedList)
				console.log(this.selectedList[0].address)
				// 在这里计算退款总金额
			},
			goBack() {
				this.$emit('back', false)
			},
			getData() {
				this.request({
					success: res => {
						this.tableData = res.data
					}
				})
			},
			// 伪request请求
			request(options) {
				const {
					success
				} = options
				let data = tableData;
				setTimeout(() => {
					typeof success === 'function' &&
						success({
							data: data
						})
				}, 500)
			},

			// 提交表单
			submit(ref) {
				this.$refs[ref].validate().then(res => {
					console.log('success', res);
					uni.showToast({
						title: `校验通过`
					})
				}).catch(err => {
					console.log('err', err);
				})
			},
		}
	}
</script>

<style scoped>
	.right-title {
		width: 100%;
		min-height: 50px;
		border-radius: 25px;
		/* background: #E5E5E5; */
		color: #41250e;
		padding: 0 5px 0 15px;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		margin-bottom: 20px;
		font-size: 16px;
	}

	.order-table {
		/* border: 1px solid #e5e5e5; */
		height: 460px;
		border-radius: 8px;
		overflow-y: auto;
		font-size: 14px;
	}

	.information {
		display: flex;
		border-bottom: 1px #EBEEF5 solid;
		padding: 8px 10px;
	}

	.information:last-child {
		border-bottom: 0 #EBEEF5 solid;
	}

	.order-detail-container {
		padding: 2px;
	}

	.product-info {
		/* height: 90px; */
		/* padding: 10px; */
		/* box-sizing: border-box; */
	}

	.introduce-model {
		padding-top: 14px;
	}

	.td-img {
		width: 80px;
		height: 80px;
		margin: auto 20px;
		/* margin: 0 20px; */
		border-radius: 5px;
	}

	.td-img image {
		width: 80px;
		height: 80px;
		border-radius: 5px;
	}

	.cart-group {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 110px;
		margin: auto;
	}

	.cart-btn {
		width: 20px;
		height: 20px;
		line-height: 20px;
		text-align: center;
		font-size: 14px;
		border: 1px solid #d1d1d1;
		/* background: #f5f5f5; */
		padding: 0;
		margin: 0;
		cursor: pointer;
		border-radius: 3px;
	}

	.cart-input {
		width: 40px;
		height: 20px;
		text-align: center;
		border: 1px solid #ddd;
		margin: 0 5px;
	}

	.product-info /deep/ .introduce-name {
		color: #999;
	}

	.product-info /deep/ .uni-table-th {
		color: #333;
	}

	/* 表单样式 */
	.formcla {
		width: 100%;
		/* background-color: #E5E5E5; */
		margin: 30px 0;
		/* box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); */
		padding: 30px;
		box-sizing: border-box;
	}

	.formcla /deep/ .uni-forms-item__content {
		width: 500px;
		flex: none;
	}

	.refundAmount {
		color: #D92400;
		font-size: 14px;
		line-height: 36px;
	}

	.service {
		font-size: 14px;
		line-height: 36px;
		color: #666;
	}

	.servicePhone {
		font-size: 14px;
		line-height: 16px;
		color: #999;
	}

	.serviceProduct {
		font-size: 12px;
		line-height: 22px;
		color: #999;
	}

	.button-group {
		display: flex;
		margin: 30px auto;
		margin-bottom: 0;
		width: 290px;
	}

	.submitBut {
		background-color: #D92400;
	}

	.imageCla /deep/ .file-title {
		margin-top: 4px;
		color: #999;
	}

	.imageCla /deep/ .file-count {
		display: none;
	}
</style>